<template>
  <div>
    <van-nav-bar title="政府服务" left-text="返回" right-text="我的" left-arrow @click-left="back" @click-right="mine"/>

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="item in list" :key="item.id" >

      <img :src="'http://124.93.196.45:10001/'+item.imgUrl" />

      </van-swipe-item>
    </van-swipe>

    
    <ul>
        <li v-for="item in data" :key="item.id" @click="get(item)">
            <img :src="'http://124.93.196.45:10001/'+item.imgUrl" alt="">
            <p>{{item.name}}</p>
        </li>
    </ul>

  </div>
</template>

<script>
import {governmentswipe,governmentdemand} from "./Service"
import mixin from  "@/mixin/flag";

export default {
    data(){
        return {
            list:[],
            data:[],
        }
    },
    mixins:[mixin],
    methods:{
        back(){
            this.$router.go(-1);
        },
        mine(){
            this.$router.push('/government/mine')
        },
        get(item){
            this.$router.push(`/government/detail/${item.id}`)
        }
    },
    
    async created(){
        let res = await governmentswipe()
        // console.log(res);
        this.list=res.data.data
        let res1 = await governmentdemand()
        res1.data.rows=res1.data.rows.sort(function(a,b){
          return a.sort-b.sort
        })
        this.data=res1.data.rows
        console.log(res1);
    }
}
</script>

<style lang="scss" scoped>
 .my-swipe .van-swipe-item {
    height: 180px;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  ul{
    width:100%;
    display: flex;
    flex-wrap: wrap;
    padding-top:40px;
    
    li{
        width:25%;
        height: 100px;
        margin-bottom: 20px;
        img{
            width: 80%;
            margin-left: 10px;
        }
        p{
            text-align: center;
            font-size:12px;
        }
    }
  }
</style>